<template>
	<div class="send_container">
		<div class="send_main">
			<form class="send_box">
				<textarea
				class="send_input" 
				name="input" 
				:placeholder="placeholder" 
				placeholder-class="plco" 
				confirm-type="send" 
				auto-height
				:disabled="isWriteing"
				 @keyup.enter="sendMsg"
				v-model="msg" 
				 />
			</form>
			<template v-if="isWriteing">
				<view class="loadEffect">
				    <view class="item"></view>
				    <view class="item"></view>
				    <view class="item"></view>
				    <view class="item"></view>
					<view class="item"></view>
					<view class="item"></view>
					<view class="item"></view>
					<view class="item"></view>
				</view>
			</template>
			<div :class="['send_btn', {'active': msg.length > 0}]" v-else @click="sendMsg"></div>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';

const placeholder = ref('Write your question here!');
const msg = ref('');
const emit = defineEmits(['addNewChatData']);
const props = defineProps({
	isWriteing: {
		type: Boolean,
		default: false
	}
});

const submitEvent = () => {
	console.log(11);
}


// 发送消息
const sendMsg = () => {	
	if (msg.value && !props.isWriteing) {
		emit('addNewChatData', msg.value);
		msg.value = '';
	}
}
</script>

<style scoped lang="scss">
.send_container {
	position: relative;
	display: flex;
	width: 100%;
	height: 145upx;
	// background: url('../../static/img/msg.svg') center no-repeat;
	// background-size: auto;
	
	&:before {
		display: inline-block;
		content: '';
		width: 50upx;
		height: 100%;
		background: url('/static/img/box/b_l.png') right center no-repeat;
		background-size: contain;
	}
	
	&::after {
		display: inline-block;
		content: '';
		width: 50upx;
		height: 100%;
		background: url('/static/img/box/b_r.png') left center no-repeat;
		background-size: contain;
	}
}

.send_main {
	flex: 1;
	display: flex;
	align-items: center;
	height: 100%;
	background: url('/static/img/box/b_bg.jpg') no-repeat;
	background-size:  100% 100% ;
}


.send_box {
	display: inline-block;
	width: 100%;
	height: calc(100% - 40upx);
	padding: 20upx 0 20upx 20upx;
	
}

.send_input {
	width: 100%;
	min-height: 100upx;
	max-height: 100%;
	overflow-y: auto;
	word-wrap: normal;
	word-break: break-word;
	// min-height: 100upx;
	text-align: left;
	color: #72502E;
}

.send_btn {
	flex-shrink: 0;
	width: 60upx;
	height: 60upx;
	margin: 0 0 0 20upx;
	background: url('../../static/img/send_btn.svg');
	background-size: cover;
	cursor: not-allowed;
	
	&.active {
		background: url('../../static/img/send_btn_active.svg');
		background-size: cover;
		cursor: pointer;
		
		&:hover {
			background: url('../../static/img/send_btn_hover.svg');
			background-size: cover;
		}
	}
}


.loadEffect {
	position: relative;
    width: 40upx;
    height: 40upx;
    margin-right: 20upx;
}
.loadEffect .item {
    position: absolute;
	top: 50%;
	left: 50%;
	width: 10upx;
	height: 10upx;
	margin-top: -5upx;
	border-radius: 100%;
	animation: ball-spin-clockwise 1.6s infinite ease-in-out;
	background-color: #712323;
}

.loadEffect .item:nth-child(1) {
    top: 5%;
    left: 50%;
    animation-delay: -1.4s
}

.loadEffect .item:nth-child(2) {
    top: 18%;
    left: 82%;
    animation-delay: -1.2s
}

.loadEffect .item:nth-child(3) {
    top: 50%;
    left: 95%;
    animation-delay: -1s
}

.loadEffect .item:nth-child(4) {
    top: 82%;
    left: 82%;
    animation-delay: -.8s
}

.loadEffect .item:nth-child(5) {
    top: 95%;
    left: 50%;
    animation-delay: -.6s
}

.loadEffect .item:nth-child(6) {
    top: 82%;
    left: 18%;
    animation-delay: -.4s
}

.loadEffect .item:nth-child(7) {
    top: 50%;
    left: 5%;
    animation-delay: -.2s
}

.loadEffect .item:nth-child(8) {
    top: 18%;
    left: 18%;
    animation-delay: 0s
}

@keyframes ball-spin-clockwise {
    0%,100% {
        opacity: 1;
        transform: scale(1)
    }

    20% {
        opacity: 1
    }

    90% {
        opacity: 0;
        transform: scale(0)
    }
}
</style>